<template>
  <div class="wrap">
    <NavBar :header-height="headerHeights" @doBack="doBack" title="waterfall"></NavBar>
    <div class="content" ref="contentRef" :style="{ height: contentHeight }">
      <div :style="{ paddingBottom: !isIos ? '35px' : '', height: '100%' }">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :disabled="refreshDisabled">
          <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
            :immediate-check="false" :offset="500">
            <div class="content-item" v-for="(item, index) in coverList" :key="index">
              <div class="item-wrap">
                <img class="cover" :src="item">
                <div class="title">{{ index + '00000' }}</div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script setup>
import NavBar from '../components/NewNavbar.vue';
import { ref, onMounted, onBeforeUnmount } from "vue";
import { headerHeight } from "@/../utils";
import { waterfall } from '../utils.js'
import { authApi } from "@utils/request/post";
import { Toast } from "vant";

// 定义头部及内容高度
const headerHeights = ref('4px')
if (headerHeight) {
  headerHeights.value = headerHeight()
}
const contentHeight = ref('100vh')
contentHeight.value = `calc(100vh - ${headerHeights.value})`
const doBack = () => {
  history.back();
}

// 获取数据
const coverList = ref([])
const reqContentList = async (pageNumber) => {
  const res = await authApi({
    method: "tritalks_aggregation_pictorial_list",
    userId: "1120101001",
    type: "tag",
    tagsCode: "1|11",
    org2: "00",
    pageNum: pageNumber,
    pageSize: 100
  });
  return res;
}
const getContentList = async (userId, isRefresh = false) => {
  loading.value = true;
  let pageNumber;
  if (isRefresh) {
    pageNumber = 1;
    pageNum.value = 2;
  } else {
    pageNumber = pageNum.value++;
  }
  const { code, data, msg } = await reqContentList(pageNumber);
  if (code == 0 && data) {
    console.log("接口调取成功", data.result.pictorialListVOList);
    coverList.value.push(...data.result.pictorialListVOList.slice(0, 30).map(item => item.cover))
    loading.value = false;
    if (data.result.pictorialListVOList.length === 0) {
      finished.value = true;
    }
  } else {
    Toast(`数据或网络异常\ncode${code} ${msg}`);
    finished.value = true;
  }
};

// 列表上拉加载下拉刷新
const pageNum = ref(1);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const maxHeight = ref(0);
const onLoad = async () => {
  await getContentList('')
  waterfall()
  maxHeight.value = waterfall()
  console.log(">>>> maxHeight.value  >>>>", maxHeight.value);
}
const onRefresh = async () => {
  finished.value = false;
  loading.value = true;
  if (refreshing.value) {
    coverList.value = [];
    refreshing.value = false;
  }
  await getContentList('', true);
  waterfall()
}

// 处理瀑布流中 容器未滑动到顶部就刷新的问题
const refreshDisabled = ref(false)
const scroll = (e) => {
  if (e.target.scrollTop > 0) {
    refreshDisabled.value = true;
  } else {
    refreshDisabled.value = false;
  }
}

// 判断机型 获取数据
const isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
onMounted(async () => {
  await getContentList('');
  setTimeout(() => {
    waterfall();
  }, 200);
  document.querySelector('.van-list').addEventListener('scroll', scroll);
})

// 销毁监听
onBeforeUnmount(() => {
  document.querySelector('.van-list').removeEventListener('scroll', scroll);
})

</script>
<style lang="less" scoped>
.content {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scroll: touch;
  padding-bottom: constant(safe-area-inset-bottom); // 兼容 iOS < 11.2
  padding-bottom: env(safe-area-inset-bottom); // 兼容 iOS >= 11.2

  .content-item {
    width: 50%;
    padding: 10px 10px 0 10px;

    .item-wrap {
      .cover {
        display: block;
        width: 100%;
        max-height: 230px;
        object-fit: cover;
        object-position: top;
      }

      .title {
        height: auto;
      }
    }

  }

  :deep(.van-pull-refresh) {
    height: 100%;
    overflow: scroll;

    .van-list {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      overflow: scroll;
      margin-bottom: 0px;

      .van-list__finished-text {
        width: 100vw;
        position: relative !important;
        left: 0px !important;
        height: 20px;
      }

      .van-list__loading {
        width: 100vw;
      }
    }
  }

}
</style>